<template>
  <div>
        <el-row :gutter="20">
       <el-col :span="24">
        <el-card class="box1" style="height: 64px" shadow="never">
          <el-form :inline="true" :model="pageParams" class="demo-form-inline">
        <el-form-item label="商品类型搜索:">
          <el-input
            v-model="pageParams.className   "
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
          </el-card>
      </el-col>
       <el-col :span="24">
        <el-card class="box2" shadow="never">
           <div class="button">
      <el-button type="primary" @click="isshow = true" icon="el-icon-circle-plus-outline" style="background-color:#ff772f;border:none ">新建</el-button>
      </div>
      <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
   >
    <el-table-column
      label="序号"
      width="80"
      type="index"
      >
    </el-table-column>
    <el-table-column
      prop="className"
      width="1050"
      label="商品类型名称">
    </el-table-column>
     <el-table-column
      prop="address"
      label="操作"
      show-overflow-tooltip>
      <template>
        <el-button size="mini" type="text" >修改</el-button>
        <el-button class="el-button-danger" size="mini" type="text" >删除</el-button>
      </template>
    </el-table-column>
  </el-table>
    <div class="box2box">
    <div><span>共{{totalCount}}条记录 第{{pageIndex}}/{{totalPage}}页</span></div>
     <div class="buttonan">
      <el-button type="info" @click="previousPage">上一页</el-button>
      <el-button type="info" @click="nextPage">下一页</el-button>
      </div>
   </div>
      </el-card>
      </el-col>
      </el-row>
  </div>
</template>

<script>
import { commoditylist } from '@/api/commodity'
export default {
  data () {
    return {
      isshow: false,
      pageParams: {
        pageIndex: 1,
        pageSize: 10,
        className: ''

      },
      tableData: [],
      totalCount: '',
      pageIndex: '',
      totalPage: ''

    }
  },
  created () {
    this.commoditylist()
  },
  methods: {
  // 设备状态
    async commoditylist () {
      const res = await commoditylist({ ...this.pageParams })
      console.log(res)
      this.tableData = res.data.currentPageRecords
      this.totalCount = res.data.totalCount
      this.pageIndex = res.data.pageIndex
      this.totalPage = res.data.totalPage
    },
    onSubmit () {
      this.commoditylist()
    },
    previousPage () {
      if (this.pageParams.pageIndex === 1) {
        return this.$message.warning('已经是第一页了')
      }
      this.pageParams.pageIndex--
      this.commoditylist()
    },
    nextPage () {
      if ((this.totalCount / 10) < this.pageParams.pageIndex) {
        return this.$message.warning('已经是最后一页了')
      }
      this.pageParams.pageIndex++
      this.commoditylist()
    }
  }

}
</script>

<style lang="less" scoped>
.box1 {
  margin-bottom: 20px;
}
form {
  margin-top: -7px;
}
.box2box {
  display: flex;
  justify-content: space-between;
  align-content: center;
  line-height: 96px;
  width: 100%;
  height: 96px;
  span {
        font-size: 16px!important;
    color: #dbdfe5!important;
  }
  }
.el-button-danger {
  color: #FF5A5A;
}
</style>
